import { Table, Popconfirm, Button } from 'antd';
import { Program, ModelReturn } from '@/data-type';
import { useState } from 'react';
import { useHistory } from 'react-router';
import { FormatterTime, getIdFromHistory } from '@/utils/kits';
import React from 'react';
import { ColumnsType } from 'antd/lib/table'
import UpdateDrawer from './common/UpdateDrawer';
import { needbackButton } from '@/utils/kits';
import AddRecord from './common/AddRecord';

const ShowProgram: React.FC<{
  model: ModelReturn<Program>
}> = (params) => {
  let programs = params.model.dataSource;
  const onUpdate = params.model.updateOne;
  const onDelete = params.model.deleteById;
  const [showDetail, setShowDetail] = useState(false);
  const [addDrawer, setAddDrawer] = useState(false);
  const [currentRow, setCurrentRow] = useState<Program>();
  //用于路由跳转
  const history = useHistory();
  let formRef = React.createRef<any>();
  function openUpdate(user: Program) {
    // console.log("update user", user);
    setCurrentRow(user);
    setShowDetail(true);
    formRef.current.setFieldsValue(user);
  }
  const onCloseDrawer = () => {
    setShowDetail(false);
  }
  const closeAddDrawer=()=>{
    setAddDrawer(false);
    params.model.query({}).then(data => {
      programs = data;
    });
  }
  function openAddDrawer() {
    // setCurrentRow(material);
    setAddDrawer(true);
  }
  const tableColumns: ColumnsType<Program> = [
    {
      title: 'ID',
      fixed: false,
      dataIndex: 'id',
    },
    {
      title: '项目名称',
      fixed: false,
      dataIndex: 'programName',
    },
    {
      title: '甲方',
      fixed: false,
      dataIndex: 'firstParty',
    },
    {
      title: '乙方',
      fixed: false,
      dataIndex: 'secondParty',
    },
    {
      title: '地址',
      fixed: false,
      dataIndex: 'programAdress',
    },
    {
      title: '项目金额',
      fixed: false,
      dataIndex: 'programAmount',
    },
    {
      title: '项目成本',
      fixed: false,
      dataIndex: 'programCost',
    },
    {
      title: '项目收益',
      fixed: false,
      dataIndex: 'programProfit',
    },
    {
      title: '项目状态',
      fixed: false,
      dataIndex: 'status',
    },
    {
      title: '开始时间',
      dataIndex: 'startDate',
      fixed: false,
      render: FormatterTime,
    },
    {
      title: '结束时间',
      dataIndex: 'endDate',
      fixed: false,
      render: FormatterTime
    },
  ];
  const columns: ColumnsType<Program> = [
    ...tableColumns,
    {
      title: '操作',
      fixed: 'right',
      width: '15%',
      render: (program: Program) => {
        return (
          <div>
            <Popconfirm title="是否删除?" onConfirm={() => onDelete(program.id)} >
              <Button>删除</Button>
            </Popconfirm>
            <Button onClick={() => openUpdate(program)}>更新</Button>
            
          </div >
        );
      },
    },
  ]
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: Program[]) => {
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record: Program) => ({
      disabled: record.programName === 'Disabled User', // Column configuration not to be checked
      name: record.programName,
    }),
  };
  return (
    <div>
      <Button onClick={() => openAddDrawer()}>新增</Button>
      <Table rowSelection={rowSelection}
        dataSource={programs}
        columns={columns}
        rowKey={'id'}
        scroll={{ x: 2500 }}
        onRow={(record) => {
          return {
            onDoubleClick: event => {
              history.push("/page/program-detail", {
                "id": record.id
              });
            }
          }
        }} />
      <UpdateDrawer onClose={onCloseDrawer}
        elem={currentRow as Program}
        visible={showDetail}
        formRef={formRef}
        updateOne={onUpdate}
        datas={tableColumns}
      >
      </UpdateDrawer>
      <AddRecord onClose={closeAddDrawer}
        visible={addDrawer}
        save={params.model.saveOne}
        datas={tableColumns}
      ></AddRecord>
    </div>
  );
};
const updateHandler = (prog: Program) => {
  console.log("需要更新的数据", prog);
}

function getValue(formRef: React.RefObject<any>, name: string): any {
  return formRef.current.getFieldValue(name);
}

export default ShowProgram;